<template>
  <a-modal
    :title="title"
    :width="800"
    :ok=false
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :hidden="true" label="上级节点id" hasFeedback>
          <a-input v-decorator="['dictId', {}]"></a-input>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :hidden="true" label="上级节点id" hasFeedback>
          <a-input v-decorator="['parentId', {}]"></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :hidden="seen" label="上级节点" hasFeedback>
          <a-input
            style="width:100%"
            v-model="model.parentName"
            :disabled="condition">
          </a-input>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :hidden="true" label="节点id" hasFeedback>
          <a-input v-decorator="['id', {}]"></a-input>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="项名"
          :hidden="false"
          hasFeedback >
          <a-input id="dictName" placeholder="请输入项名" v-decorator="['itemText', validatorRules.itemText ]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="项值">
          <a-input placeholder="请输入项值" v-decorator="['itemValue',validatorRules.itemValue]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序值">
          <a-input-number :min="1"  v-decorator="['sortOrder',{'initialValue':1}]"/>
          值越小越靠前
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="是否启用"
          hasFeedback>
          <a-switch checkedChildren="启用" unCheckedChildren="禁用" @change="onChose" v-model="visibleCheck"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="描述">
          <a-textarea placeholder="请输入描述" v-decorator="['description', {}]"  />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import { queryDictItemIdTree } from '@/api/api'
import pick from 'lodash.pick'

export default {
  name: "SysDictItemModal",
  data () {
    return {
      dictItemTree:[],
      phoneWarning:'',
      dictName:"",
      status: 1,
      visibleCheck: true,
      title:"操作",
      seen:false,
      visible: false,
      condition:true,
      disableSubmit:false,
      model: {},
      selectedRoles:[],
      menuhidden:false,
      menuusing:true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules:{
        itemText:{rules: [{ required: true, message: '请输入项名!' }]},
        itemValue:{rules: [{ required: true, message: '请输入项值!' }]}
      },
      url: {
        add: "/platform/system/sysDictItem/add",
      },
      dictDisabled:true,
    }
  },
  created () {

  },
  methods: {
    loadTreeData(){
      var that = this;
      queryDictItemIdTree().then((res)=>{
        if(res.success){
          that.dictItemTree = [];
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i];
            that.dictItemTree.push(temp);
          }
        }

      })
    },
    onChose(checked) {
      if (checked) {
        this.status = 1;
        this.visibleCheck = true;
      } else {
        this.status = 0;
        this.visibleCheck = false;
      }
    },
    onSelect(key){
      this.districtId=key
    },
    treeExpand(keys){
      this.expandedKeys=keys
    },
    insertDictItem (key,name) {
      if(key){
        this.seen = false;
        this.dictDisabled = false;
      }else{
        this.seen = true;
        this.dictDisabled = true;
      }
      this.update(key,name);
    },
    update (key,name) {
      this.form.resetFields();
      this.model = Object.assign({}, {});
      this.visible = true;
      this.visibleCheck = true;
      this.model.dictId = key!=null?key.toString():null;
      this.model.parentName = name!=null?name.toString():null;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model,'itemText','itemValue','description','dictId'))
      });
    },
    addDictItem (key,itemText) {
      if(key){
        this.seen = false;
        this.dictDisabled = false;
      }else{
        this.seen = true;
        this.dictDisabled = true;
      }
      this.edit(key,itemText);
    },
    edit (key,itemText) {
      this.form.resetFields();
      this.model = Object.assign({}, {});
      this.visible = true;
      this.model.parentId = key!=null?key.toString():null;
      this.model.parentName = itemText!=null?itemText.toString():null;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model,'itemText','itemValue','description','parentId'))
      });
    },
    editDictItem (key,itemText,itemValue,sortOrder,status,description) {
      this.seen = true;
      this.form.resetFields();
      this.model = Object.assign({}, {});
      this.visible = true;
      this.model.id = key!=null?key.toString():null;
      this.model.itemText = itemText!=null?itemText.toString():null;
      this.model.itemValue = itemValue!=null?itemValue.toString():null;
      this.model.sortOrder = sortOrder!=null?sortOrder.toString():null;
      this.model.status = status!=null?status.toString():null;
      if (status == 1) {
        this.visibleCheck = true;
      } else {
        this.visibleCheck = false;
      }
      this.model.description = description!=null?description.toString():null;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model,'id','itemText','itemValue','sortOrder','status','description'))
      });
    },
    close () {
      this.$emit('close');
      this.disableSubmit = false;
      this.visible = false;
    },
    handleOk () {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          if (this.visibleCheck) {
            this.model.status = 1;
          } else {
            this.model.status = 0;
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          httpAction(this.url.add,formData,"post").then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.loadTreeData();
              that.$emit('ok');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })

        }
      })
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>

<style scoped>

</style>